<template>
 
    <section>
        <router-link tag="div" :to="{path:option.url, query: {[option.query]: Item[option.query]||''}, params: {[option.params]: Item[option.params]||''}}"  v-for="(Item,index) in dataList" :key="index" class="listRequest":style="index==(dataList.length-1)? 'border-bottom:'+'unset':''">
           <ul class="left" :style="Item.image?'width:'+'65%':'width:'+'100%'">
                <li  class="firli"  :style="Item.image?'width:'+'100%':''">{{Item.title}}</li>
                <li class="secli">
                    <span class="time">{{Item.time|formatDate('yyyy-MM-dd')}}</span>

                    <div v-if="ifType">
                        <div v-if="Item.type==='待处理'" class="tag">{{Item.type}}</div>
                        <div v-else-if="Item.type==='成功'" class="tagTwo">{{Item.type}}</div>
                        <div v-else-if="Item.type==='失败'" class="tagThree">{{Item.type}}</div>
                        <div v-else class="tag">{{Item.type}}</div>
                    </div>
                </li>
                <li class="reason"  v-if="Item.reason">{{Item.reason}}</li>
            </ul>
            
        </router-link>
    </section>
</template>

<script>
    export default {
        name:'wioc-list-request',
        data() {
            return {
                   ifType:this.isTag,
            };
        },
         watch:{
       },
        methods:{

    },
        props:{
            dataList:{
                type:Array,
            },
            isTag:{
                type:Boolean,
                default:true
            },
			option:{
				type: Object,
				default: () => ({
					url:'/',
					params:'id',
					query:'id',
					name:'name'
				})
			}
		}
    }
</script>

<style  lang="less" scoped>
    .listRequest {
        display: flex;
        flex-direction: row;
        height: 0.94rem;
        border-bottom: 0.01rem solid #f0f0f0;
        .left{
            //flex:1;
            padding-right: 0.05rem;
            box-sizing: border-box;
            margin-top: 0.15rem;
            .firli{
                white-space: nowrap;
                font-size: 0.15rem;
                text-overflow: ellipsis;
                overflow: hidden;
                //width: 70%;
                //width: 95%;
                line-height: 0.21rem;
                font-family:PingFangSC-Regular;
                color:#595959;
                letter-spacing:-0.07px;
                text-align:left;
            }
            .secli{
                display: flex;
                padding-top: 0.1rem;
                justify-content: space-between;
                line-height: 0.16rem;
                .time{
                    font-size: 0.11rem;
                    font-family:PingFangSC-Regular;
                    color:#c0c4cc;
                    letter-spacing:-0.05px;
                    text-align:left;
                    line-height: 0.16rem;
                }
                .tag,.tagTwo,.tagThree{  //无价值
                    font-family: PingFangSC-Regular;
                    font-size: 0.11rem;
                    letter-spacing: -0.07px;
                    padding: 0 0.05rem 0 0.05rem;
                    border-radius: 0.1rem;
                    text-align: center;
                    line-height: 0.16rem;
                    margin-right: 0.05rem;
                }
                .tag{background:  rgba(155,155,155,0.10); color: #A1A1A1;}
                .tagTwo{  //高价值
                    background: #dbf8f4;
                    color: #63ba96;
                }
                .tagThree{ //负面
                    background: #fcd0d0;
                    color: #f66464;
                }
            }

            .reason{
               padding-top: 0.1rem;
               font-family: PingFangSC-Regular;
               font-size: 0.11rem;
               color:#4BA0F3;
               line-height: 0.16rem;
                letter-spacing:-0.05px;
            }

        }
        .right{
            //  flex: 1;
            width: 35%;
            img{
                // width: 1.06rem;
                height: 0.67rem;
                width: 100%;
                border-radius: 0.05rem;
                margin: 0.12rem 0 0.12rem 0;
            }
        }

    }

</style>
